<script lang="ts" setup>
import { useUserStore } from '@/stores/user'
import FormDialog from '@/components/FormDialog.vue'
import { ref } from 'vue'

const userStore = useUserStore()
const visible = ref(false)
const formType = ref<'login' | 'signup'>('login')
const login = () => {
    visible.value = true
    formType.value = 'login'
}
const signup = () => {
    visible.value = true
    formType.value = 'signup'
}
// 格式化日期，类型为：xxxx年x月x日 上午/下午x时x分
const cnDateFormat = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
</script>
<template>
    <el-empty v-if="!userStore.isLogged" description="用户未登录">
        <el-button type="primary" @click="login">登录</el-button>

        <el-button @click="signup">注册</el-button>
    </el-empty>
    <div v-else class="card-box">
        <el-card>
            <template #header>
                <div class="head">
                    <el-text style="font-size: var(--el-font-size-extra-large)" tag="b">
                        用户信息
                    </el-text>
                    <el-button type="warning" @click="userStore.logout">下线</el-button>
                </div>
            </template>
            <el-row> 用户名：{{ userStore.user.name }}</el-row>
            <el-row> 邮箱：{{ userStore.user.email }}</el-row>
            <el-row>
                本次登录时间：{{ cnDateFormat.format(new Date(userStore.user.thisTimeStamp)) }}
            </el-row>
            <el-row v-if="userStore.user.lastTimeStamp">
                上次登录时间：{{ cnDateFormat.format(new Date(userStore.user.lastTimeStamp)) }}
            </el-row>
        </el-card>
    </div>
    <FormDialog :type="formType" :visible="visible" @success="visible = false" />
</template>

<style scoped>
.card-box {
    width: 100%;
    /* 文字居中 */
    text-align: center;
}

.el-card {
    max-width: 400px;
    margin: 3% auto 0;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-row {
    margin-bottom: 20px;
}
</style>